<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" src="../../assets/logo.png" />
      </template>
      <template #right>
        <van-icon
          name="search"
          size="0.48rem"
          color="white"
          @click="$router.push({path: '/search'})"
        />
      </template>
    </van-nav-bar>
    <!-- 主体 -->
    <div class="mian">
      <van-tabs
        @click="qieHuan"
        v-model="active"
        animated
        sticky
        offset-top="1.22666667rem"
      >
        <!-- 导航栏 -->
        <van-tab
          :title="item.name"
          :name="item.id"
          v-for="item in daoHangList"
          :key="item.id"
        >
          <!-- 下拉刷新 -->
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <!-- 加载更多 -->
            <van-list
              offset="10"
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <!-- 每个对应导航的内容 -->
              <cellList :arr="wenZhangList" @del="delFn" />
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
      <!-- + 号 小图标 点击 进行频道编辑 -->
      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="show = true"
      />
      <!-- 弹出层组件 -->
      <!-- close-on-click-overlay 是否在点击遮罩层后关闭（false 不关闭） -->
      <van-popup
        v-model="show"
        :close-on-click-overlay="false"
        class="edit_wrap"
        @close="$refs.tan.show = false"
      >
        <div class="popup-container">
          <!-- 弹出层的主体区域 -->
          <div class="pop-body">
            <!-- 1.接收切回事件 2.将用户已选导航传入 -->
            <ChannelEdit
              ref="tan"
              @qieHui="show = false"
              :userList="daoHangList"
              @thisId="thisIdFn"
            ></ChannelEdit>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
// 请求接口
import {
  allUserDaoHangAPI,
  getWenZhangAPL,
  buGanXinQuAPI,
  juBaoAPI
} from '@/api'
// 封装的组件
import cellList from './cellList.vue'
import ChannelEdit from './ChannelEdit.vue'
import { goToTime } from '@/utils/date'

export default {
  // 定义组件
  components: {
    cellList,
    ChannelEdit
  },
  data () {
    return {
      active: 0, // 默认显示第一个
      daoHangList: [], // 导航列表
      wenZhangList: [], // 文章列表
      channelId: 0, // 请求哪个导航数据对应的id
      loading: false, // 底部加载状态
      finished: false, // 底部加载完成
      fenye: null, // 上拉加载更多 --- 用于请求数据
      isLoading: false, // 顶部刷新状态
      show: false // 编辑弹出层
    }
  },
  // 获取导航列表
  async created () {
    const res = await allUserDaoHangAPI()
    // console.log(res)
    this.daoHangList = res.data.data.channels

    this.getList() // 页面一打开就执行一次 获取文章列表
  },
  methods: {
    // 处理时间
    goToTime,
    // 获取文章列表
    async getList () {
      const res2 = await getWenZhangAPL({
        channelId: this.channelId,
        timestamp: this.fenye
      })
      // 如果数据全部加载完毕,--提示
      if (res2.data.data.results === 0) {
        this.finished = false
        return
      }
      // console.log(res2)
      // 将当前数据列表中所有的时间拿出  调用goToTime处理成 几年前 几月前等格式
      res2.data.data.results.forEach((obj) => {
        obj.pubdate = this.goToTime(obj.pubdate)
      })
      // 这里做分页数据获取
      this.fenye = res2.data.data.pre_timestamp
      // 将上一页数据,与下一页数据拼接
      this.wenZhangList = [...this.wenZhangList, ...res2.data.data.results]
      // 底部加载状态
      this.loading = false
      // 顶部刷新状态
      this.isLoading = false
      // console.log(res2)
    },
    // 导航切换
    qieHuan (name) {
      // name 每一项的id
      this.channelId = name
      // 每次点击切换,也要重新获取文章列表
      // 跟下拉刷新一样,每次切换都要重新读取数据
      this.fenye = null // 页码变为空,重新拿第一页数据
      this.wenZhangList = [] // 数据列表也为空
      this.getList() // 然后重新发起请求
    },
    // 加载更多
    onLoad () {
      // 第一次打开页面不自动执行,避免第一组数据重复
      if (this.wenZhangList.length === 0) {
        return
      }
      this.getList()
    },
    // 下拉刷新
    onRefresh () {
      this.fenye = null // 页码变为空,重新拿第一页数据
      this.wenZhangList = [] // 数据列表也为空
      this.getList() // 然后重新发起请求
    },
    // 不感兴趣,删除
    async delFn (item, action) {
      // ------------------ 前台本地删除 ------------
      const index = this.wenZhangList.findIndex((obj) => {
        return obj.art_id === item.art_id
      })
      this.wenZhangList.splice(index, 1)
      // 不感兴趣借口
      if (action.name === '不感兴趣') {
        // 调用删除接口--------------
        const res3 = await buGanXinQuAPI({
          delId: item.art_id
        })
        console.log(item.id)
        console.log(res3)
        // 正常接口 重新返回数据,执行下面代码即可

        // this.wenZhangList = []
        // this.fenye = null
        // this.getList()
      } else {
        // 二级数据面板 举报 删除接口
        const res4 = await juBaoAPI({
          delId: item.art_id,
          type: action.value
        })
        console.log(res4)
      }
    },
    thisIdFn (item) {
      // tabs的v-model控制显示那个频道,默认值为索引,但如果tab有name
      // ,默认绑定是name的值,此时name的值为频道id,
      // 所以给v-model对应的变量赋予频道id,达成切换目的
      this.active = item.id
      // 切换完还不够,还要显示对应数据,调用上面方法
      this.qieHuan(item.id)
    }
  }
}
</script>

<style>
.logo {
  width: 100px;
  height: 30px;
}
/* 头部固定在上面后，脱离文档流，所以给下面内容加上边距 */
.mian {
  margin-top: 46px;
}
/* 设置 tabs 容器的样式 */
.van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

/* 设置小图标的样式 */
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
/* // 弹出层容器宽度高度铺满屏幕 */
/*频道编辑弹出层 */
.edit_wrap {
  width: 100%;
  height: 100%;
}
</style>
